import React, { useEffect, useState } from 'react'
import { Badge, Descriptions, Card, Button } from 'antd'
import { reqHospitalShow } from '@/api/hospital/hospitalList'
import { useParams, useNavigate } from 'react-router-dom'
import { IhospitalShow } from '@api/hospital/model/hospitalListTypes'
export default function HospitalShow() {
  const { id } = useParams()
  const navigate = useNavigate()

  //定义状态
  const [hospitalShow, setHospitalShow] = useState<IhospitalShow>({
    bookingRule: {
      cycle: 10,
      releaseTime: '08:30',
      stopTime: '11:30',
      quitDay: -1,
      quitTime: '15:30',
      rule: [
        '西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号',
        '东院区预约号取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号',
      ],
    },
    hospital: {
      id: '622574cc36a9ba1be763dad8',
      createTime: '2022-03-07 10:58:20',
      updateTime: '2022-06-20 08:37:31',
      isDeleted: 0,
      param: {
        hostypeString: '三级甲等',
        fullAddress: '北京市市辖区西城区大望路',
      },
      hoscode: '1000_0',
      hosname: '北京协和医院',
      hostype: '1',
      provinceCode: '110000',
      cityCode: '110100',
      districtCode: '110102',
      address: '大望路',
      logoData: '',
      intro: '',
      route: '',
      status: 0,
    },
  })
  useEffect(() => {
    async function fetchData() {
      const result = await reqHospitalShow(id as string)
      setHospitalShow(result)
    }
    fetchData()
  }, [])
  return (
    <Card>
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          {hospitalShow.hospital.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          <img
            src={`data:image/png;base64,` + hospitalShow.hospital.logoData}
            alt=""
            width="80"
          />
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {hospitalShow.hospital.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {hospitalShow.hospital.param.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={2}>
          {hospitalShow.hospital.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {hospitalShow.hospital.intro}
        </Descriptions.Item>
      </Descriptions>
      <Descriptions
        title="预约规则信息"
        bordered
        column={2}
        style={{ marginTop: 20, marginBottom: 20 }}
      >
        <Descriptions.Item label="预约周期">
          {hospitalShow.bookingRule.cycle} 天
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {hospitalShow.bookingRule.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {hospitalShow.bookingRule.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {hospitalShow.bookingRule.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
          {hospitalShow.bookingRule.rule.map((item, index) => (
            <p key={index}>
              {index + 1}.{item}
            </p>
          ))}
        </Descriptions.Item>
      </Descriptions>
      <Button
        onClick={() => {
          navigate(-1)
        }}
      >
        返回
      </Button>
    </Card>
  )
}
